<template>
	<div>
		<!-- 绑定 class -->
		<div style="color: green">我是div</div>
		<!-- 无法添加其他的属性,只能已经存在的属性, px 需要用'' -->
		<div v-bind:style="{ color: color, fontSize: num }">我是div</div>
		<div v-bind:style="{ color: color, fontSize: fs + 'px' }">我是div</div>
		<!-- 绑定对象,可以添加或者是删除属性  属性多了v-bind -->
		<div v-bind:style="obj">我是div</div>
		<!-- v-bin的简写 :  v-test {{}} -->
		<div :style="{ color: color, fontSize: num }">简写</div>
	</div>
</template>

<script>
	export default {}
</script>

<script setup>
	import { ref, reactive } from 'vue'

	let color = ref('red')
	let num = ref('40px')
	let fs = ref(20)
	let istrue = ref(true)
	let obj = reactive({ color: 'red', backgroundColor: 'red' })

	setTimeout(() => {
		obj.fontSize = '40px'
		obj.color = 'green'
	}, 3000)

	setTimeout(() => {
		delete obj.color
	}, 5000)

</script>

<style>
	.red {
		color: red;
	}
</style>
